import React, { Component } from 'react'

import HouseCard from './houseCard'

import style from './index.less'

const Card = ({ title, visible = true, data = {}, children }) => {
  return (
    <div className = { style['card'] } style = { { display: visible ? 'block' : 'none' } }>
      {
        title ?
          <div className = { style['card-header'] }>{ title }</div> :
          null
      }
      <div className = { style['card-body'] }>
        {
          Object.keys(data).map((k, i) => (
            <div className = { style['card-info'] } key = { i }>
              <div className = { style['card-info-label'] }>{ k }</div>
              <div className = { style['card-info-value'] }>{ data[k] }</div>
            </div>
          ))
        }
        { children }
      </div>
    </div>
  )
}

Card.HouseCard = HouseCard

export default Card
